<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <div class="game-header common-panel">
      <div class="logo">
        <img src="@/assets/wow/inv_misc_head_dragon_01.jpg" alt="WoW Logo" class="wow-logo" />
        魔兽世界论坛
      </div>

      <div class="search-bar">
        <i class="fas fa-search"></i>
        <el-input
            v-model="searchQuery"
            placeholder="搜索论坛主题..."
            size="large"
            @keyup.enter="handleSearch"
        />
      </div>

      <div class="user-actions">
        <div class="action-icon" @click="toggleNotifications">
          <i class="fas fa-bell"></i>
          <span class="notification-badge" v-if="notifications.length > 0">{{ notifications.length }}</span>
        </div>
        <div class="action-icon" @click="toggleMessages">
          <i class="fas fa-envelope"></i>
          <span class="message-badge" v-if="unreadMessages > 0">{{ unreadMessages }}</span>
        </div>
        <el-dropdown trigger="click" @command="handleUserAction">
          <el-avatar src="https://randomuser.me/api/portraits/men/32.jpg" size="medium" class="user-avatar"></el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人资料</el-dropdown-item>
              <el-dropdown-item command="settings">设置</el-dropdown-item>
              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-layout">
      <!-- 左侧导航栏 - 魔兽世界职业 -->
      <div class="left-sidebar common-panel">
        <div class="class-section-title">
          <img src="@/assets/wow/achievement_boss_archaedas.jpg" alt="Classes" class="section-icon" />
          魔兽世界职业
        </div>

        <div
            v-for="cls in wowClasses"
            :key="cls.id"
            class="class-item"
            :class="{ active: activeClass === cls.id }"
            @click="setActiveClass(cls.id)"
        >
          <div class="class-icon">
            <img :src="cls.image" :alt="cls.name" />
          </div>
          <span class="class-name">{{ cls.name }}</span>
        </div>

        <el-divider></el-divider>

        <div
            v-for="item in secondaryNavItems"
            :key="item.id"
            class="nav-item"
            :class="{ active: activeNav === item.id }"
            @click="setActiveNav(item.id)"
        >
          <i :class="item.icon"></i>
          {{ item.label }}
        </div>
      </div>

      <!-- 中间内容区 -->
      <div class="main-content">
        <!-- 热门话题区域 -->
        <div class="topics-container common-panel">
          <div class="section-title">
            <img src="@/assets/wow/spell_fire_flameblades.jpg" alt="Hot Topics" class="section-icon" />
            热门话题
          </div>

          <div class="topics-section">
            <div
                v-for="topic in hotTopics"
                :key="topic.id"
                class="topic"
                @click="viewTopic(topic)"
            >
              <img :src="topic.image" :alt="topic.title" />
              <div class="topic-title">{{ topic.title }}</div>
              <div class="topic-stats">
                <span><i class="fas fa-comment"></i> {{ topic.comments }}</span>
                <span><i class="fas fa-eye"></i> {{ topic.views }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 话题列表 -->
        <div class="posts-container">
          <div class="section-title" style="display: flex; justify-content: space-between; align-items: center;">
          <span style="display: flex; align-items: center;">
            <img src="" alt="Discussions" class="section-icon" />
            最新讨论
          </span>
            <el-button type="primary" key="primary" @click="openNewTopicDialog" link>新增话题</el-button>
          </div>
          <!-- 修改话题列表渲染，添加 null 检查 -->
          <div v-for="topic in validTopics" :key="topic.id" class="post common-panel">
            <!-- 确保 topic 存在再渲染内容 -->
            <div v-if="topic">
              <div class="post-header">
                <el-avatar :src="topic.avatar" size="medium"></el-avatar>
                <div class="post-info">
                  <div class="post-user">{{ topic.user }}</div>
                  <div class="post-time">{{ formatTime(topic.timestamp) }}</div>
                </div>
                <el-dropdown trigger="click" class="post-menu">
                  <i class="fas fa-ellipsis-h"></i>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="saveTopic(topic)">收藏话题</el-dropdown-item>
                      <el-dropdown-item @click="reportTopic(topic)">举报</el-dropdown-item>
                      <el-dropdown-item @click="hideTopic(topic)">隐藏</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>

              <div class="post-content">
                <h3>{{ topic.title }}</h3>
                <!-- 渲染主内容 -->
                <div v-html="topic.content"></div>

                <!-- 新增：付费内容区域 -->
                <div v-if="topic.isPaid" class="paid-section">
                  <div class="paid-header">
                    <i class="fas fa-lock"></i>
                    <span>付费内容 ({{ topic.price }} 金币)</span>
                    <el-button
                        v-if="!topic.hasPaid"
                        type="warning"
                        size="small"
                        @click="purchaseContent(topic)"
                        class="purchase-button"
                    >
                      解锁内容
                    </el-button>
                  </div>

                  <!-- 已付费显示内容，未付费显示提示 -->
                  <div v-if="topic.hasPaid" v-html="topic.paidContent" class="paid-content"></div>
                  <div v-else class="paid-preview">
                    这部分内容需要付费后才能查看。解锁后可获得专业攻略、详细数据分析和独家技巧。
                  </div>
                </div>
              </div>

              <img v-if="topic.image" :src="topic.image" alt="Topic image" class="post-image" />

              <div class="post-stats">
                <span class="stat-item"><i class="fas fa-comment"></i> {{ topic.comments }} 条评论</span>
                <span class="stat-item"><i class="fas fa-eye"></i> {{ topic.views }} 次浏览</span>
                <span class="stat-item"><i class="fas fa-heart"></i> {{ topic.likes }} 个赞</span>
              </div>

              <div class="post-actions">
                <div
                    class="post-action"
                    :class="{ liked: topic.isLiked }"
                    @click="toggleLike(topic)"
                >
                  <i :class="topic.isLiked ? 'fas fa-heart' : 'far fa-heart'"></i>
                  <span>点赞</span>
                </div>
                <div class="post-action" @click="toggleComments(topic.id)">
                  <i class="fas fa-comment"></i>
                  <span>评论</span>
                </div>
                <div class="post-action" @click="shareTopic(topic)">
                  <i class="fas fa-share"></i>
                  <span>分享</span>
                </div>
              </div>

              <!-- 评论区域 -->
              <div v-if="topic.showComments" class="comments-section">
                <div class="comment-input">
                  <el-avatar src="https://randomuser.me/api/portraits/men/32.jpg" size="small"></el-avatar>
                  <el-input
                      v-model="topic.newComment"
                      placeholder="写一条评论..."
                      size="small"
                      @keyup.enter="addComment(topic)"
                  />
                </div>
                <div v-for="comment in topic.commentList" :key="comment.id" class="comment">
                  <el-avatar :src="comment.avatar" size="small"></el-avatar>
                  <div class="comment-content">
                    <div class="comment-user">{{ comment.user }}</div>
                    <div class="comment-text">{{ comment.text }}</div>
                    <div class="comment-time">{{ formatTime(comment.timestamp) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 使用新的弹窗组件 -->
  <NewTopicDialog
      :wow-classes="wowClasses"
      :visible="dialogVisible"
      @update:visible="dialogVisible = $event"
      @submit="handleNewTopic"
  />
</template>

<script>
import { defineComponent, ref, computed } from 'vue'; // 添加 computed
import {
  ElAvatar,
  ElInput,
  ElButton,
  ElDivider,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElMessage
} from 'element-plus';
import warriorImg from '@/assets/wow/classicon_warrior.jpg';
import paladinImg from '@/assets/wow/classicon_paladin.jpg';
import hunterImg from '@/assets/wow/classicon_hunter.jpg';
import rogueImg from '@/assets/wow/classicon_rogue.jpg';
import priestImg from '@/assets/wow/classicon_priest.jpg';
import shamanImg from '@/assets/wow/classicon_shaman.jpg';
import mageImg from '@/assets/wow/classicon_mage.jpg';
import warlockImg from '@/assets/wow/classicon_warlock.jpg';
import monkImg from '@/assets/wow/classicon_monk.jpg';
import druidImg from '@/assets/wow/classicon_druid.jpg';
import demonhunterImg from '@/assets/wow/classicon_demonhunter.jpg';
import deathknightImg from '@/assets/wow/classicon_deathknight.jpg';
import NewTopicDialog from "@/views/NewTopicDialog.vue";
export default defineComponent({
  name: 'WoWForum',
  components: {
    ElAvatar,
    ElInput,
    ElButton,
    ElDivider,
    ElDropdown,
    ElDropdownMenu,
    ElDropdownItem,
    NewTopicDialog
  },
  setup() {
    // 响应式数据
    const searchQuery = ref('');
    const newTopicTitle = ref('');
    const newTopicContent = ref('');
    const activeClass = ref('warrior');
    const activeNav = ref('explore');
    const isPosting = ref(false);
    const notifications = ref([]);
    const unreadMessages = ref(5);
    const dialogVisible = ref(false);

    // 魔兽世界职业
    const wowClasses = ref([
      { id: 'warrior', name: '战士', image: warriorImg },
      { id: 'paladin', name: '圣骑士', image: paladinImg },
      { id: 'hunter', name: '猎人', image: hunterImg },
      { id: 'rogue', name: '潜行者', image: rogueImg },
      { id: 'priest', name: '牧师', image: priestImg },
      { id: 'shaman', name: '萨满', image: shamanImg },
      { id: 'mage', name: '法师', image: mageImg },
      { id: 'warlock', name: '术士', image: warlockImg },
      { id: 'monk', name: '武僧', image: monkImg },
      { id: 'druid', name: '德鲁伊', image: druidImg },
      { id: 'demonhunter', name: '恶魔猎手', image: demonhunterImg },
      { id: 'deathknight', name: '死亡骑士', image: deathknightImg }
    ]);

    const secondaryNavItems = ref([
      { id: 'settings', label: '设置', icon: 'fas fa-cog' },
      { id: 'guides', label: '攻略', icon: 'fas fa-book' },
      { id: 'raid', label: '团队副本', icon: 'fas fa-users' },
      { id: 'pvp', label: 'PVP竞技场', icon: 'fas fa-swords' }
    ]);

    // 热门话题数据
    const hotTopics = ref([
      {
        id: 1,
        title: '10.2版本最佳DPS是谁？',
        image: 'https://picsum.photos/200/150?random=1',
        comments: 142,
        views: 2450
      },
      {
        id: 2,
        title: '阿梅达希尔团队副本攻略',
        image: 'https://picsum.photos/200/150?random=2',
        comments: 89,
        views: 1870
      },
      {
        id: 3,
        title: 'PVP第3赛季主流阵容',
        image: 'https://picsum.photos/200/150?random=3',
        comments: 67,
        views: 1560
      },
      {
        id: 4,
        title: '10.2.5版本新增坐骑',
        image: 'https://picsum.photos/200/150?random=4',
        comments: 54,
        views: 1320
      }
    ]);

    // 话题数据
    const topics = ref([
      {
        id: 1,
        title: '大秘境中战士狂怒与武器天赋对比',
        user: '格罗玛什',
        avatar: 'https://randomuser.me/api/portraits/men/44.jpg',
        content: '随着10.2.5版本的改动，在高等级大秘境中哪个专精表现更好？我很难决定主玩哪个专精。',
        image: 'https://picsum.photos/600/400?random=1',
        timestamp: Date.now() - 3 * 60 * 60 * 1000,
        likes: 124,
        comments: 42,
        views: 876,
        isLiked: false,
        showComments: false,
        newComment: '',
        commentList: [
          {
            id: 1,
            user: '萨尔',
            avatar: 'https://randomuser.me/api/portraits/men/10.jpg',
            text: '狂怒天赋在大量敌人战斗中能提供更稳定的AOE伤害。',
            timestamp: Date.now() - 2 * 60 * 60 * 1000
          }
        ]
      },
      {
        id: 2,
        user: '吉安娜',
        avatar: 'https://randomuser.me/api/portraits/women/20.jpg',
        title: '法师塔挑战 - 冰法技巧',
        content: '有人有冰法通过法师塔挑战的技巧吗？我在第三阶段的小怪处卡住了。',
        timestamp: Date.now() - 5 * 60 * 60 * 1000,
        likes: 98,
        comments: 23,
        views: 654,
        isLiked: true,
        showComments: false,
        newComment: '',
        commentList: []
      },
      {
        id: 3,
        user: '伊利丹',
        avatar: 'https://randomuser.me/api/portraits/men/65.jpg',
        title: '浩劫DH输出循环求助',
        content: '我的恶魔猎手刚满70级，面对输出循环感到不知所措。有什么推荐的WA或攻略吗？',
        image: 'https://picsum.photos/600/400?random=3',
        timestamp: Date.now() - 8 * 60 * 60 * 1000,
        likes: 76,
        comments: 31,
        views: 543,
        isLiked: false,
        showComments: false,
        newComment: '',
        commentList: []
      }
    ]);

    // 方法
    const setActiveClass = (classId) => {
      activeClass.value = classId;
    };

    const setActiveNav = (navId) => {
      activeNav.value = navId;
    };

    const handleSearch = () => {
      if (searchQuery.value.trim()) {
        ElMessage.success(`搜索: ${searchQuery.value}`);
      }
    };

    const handleUserAction = (command) => {
      ElMessage.info(`操作: ${command}`);
    };

    const toggleNotifications = () => {
      ElMessage.info('点击了通知');
    };

    const toggleMessages = () => {
      ElMessage.info('点击了消息');
    };

    const viewTopic = (topic) => {
      ElMessage.info(`查看话题: ${topic.title}`);
    };

    const submitTopic = async () => {
      if (newTopicTitle.value.trim() && newTopicContent.value.trim()) {
        isPosting.value = true;

        // 模拟提交延迟
        await new Promise(resolve => setTimeout(resolve, 1000));

        const newTopic = {
          id: topics.value.length + 1,
          title: newTopicTitle.value,
          user: '你',
          avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
          content: newTopicContent.value,
          timestamp: Date.now(),
          likes: 0,
          comments: 0,
          views: 0,
          isLiked: false,
          showComments: false,
          newComment: '',
          commentList: []
        };

        topics.value.unshift(newTopic);
        newTopicTitle.value = '';
        newTopicContent.value = '';
        isPosting.value = false;

        ElMessage.success('话题发布成功!');
      } else {
        ElMessage.warning('请输入标题和内容');
      }
    };

    const clearTopic = () => {
      newTopicTitle.value = '';
      newTopicContent.value = '';
    };

    const toggleLike = (topic) => {
      topic.isLiked = !topic.isLiked;
      topic.likes += topic.isLiked ? 1 : -1;
    };

    const toggleComments = (topicId) => {
      const topic = topics.value.find(t => t.id === topicId);
      if (topic) {
        topic.showComments = !topic.showComments;
      }
    };

    const addComment = (topic) => {
      if (topic.newComment.trim()) {
        const newComment = {
          id: topic.commentList.length + 1,
          user: '你',
          avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
          text: topic.newComment,
          timestamp: Date.now()
        };

        topic.commentList.push(newComment);
        topic.comments += 1;
        topic.newComment = '';
      }
    };

    const shareTopic = (topic) => {
      ElMessage.success('话题已分享!');
      topic.views += 10;
    };

    const formatTime = (timestamp) => {
      const now = Date.now();
      const diff = now - timestamp;

      const seconds = Math.floor(diff / 1000);
      const minutes = Math.floor(seconds / 60);
      const hours = Math.floor(minutes / 60);
      const days = Math.floor(hours / 24);

      if (days > 0) return `${days}天前`;
      if (hours > 0) return `${hours}小时前`;
      if (minutes > 0) return `${minutes}分钟前`;
      return '刚刚';
    };

    // 话题操作
    const openMediaUpload = () => ElMessage.info('媒体上传功能');
    const attachFile = () => ElMessage.info('附件上传功能');
    const addPoll = () => ElMessage.info('添加投票功能');
    const saveTopic = () => ElMessage.success('话题已收藏!');
    const reportTopic = () => ElMessage.info('话题已举报');
    const hideTopic = () => ElMessage.info('话题已隐藏');

    // 添加过滤空话题的计算属性
    const validTopics = computed(() => {
      return topics.value.filter(topic => topic != null);
    });

    // 打开新增话题弹窗
    const openNewTopicDialog = () => {
      dialogVisible.value = true;
    };

    // 处理新话题提交
    const handleNewTopic = (formData) => {
      // 创建新话题对象（包含付费内容）
      const newTopic = {
        id: topics.value.length + 1,
        title: formData.title || '未命名话题',
        user: '你',
        avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
        content: formData.content || '',
        paidContent: formData.paidContent || '', // 付费内容
        classType: formData.classType || '',
        topicType: formData.topicType || 'guide',
        isPaid: formData.isPaidContent || false,
        price: formData.price || 0,
        hasPaid: false, // 用户是否已付费
        timestamp: Date.now(),
        likes: 0,
        comments: 0,
        views: 0,
        isLiked: false,
        showComments: false,
        newComment: '',
        commentList: []
      };

      // 添加到话题列表
      topics.value.unshift(newTopic);
      ElMessage.success('话题发布成功!');
    };

    // 购买付费内容
    const purchaseContent = (topic) => {
      topic.hasPaid = true;
      ElMessage.success(`已成功解锁付费内容！扣除 ${topic.price} 金币`);
    };

    return {
      searchQuery,
      newTopicTitle,
      newTopicContent,
      activeClass,
      activeNav,
      isPosting,
      notifications,
      unreadMessages,
      wowClasses,
      secondaryNavItems,
      hotTopics,
      topics,
      setActiveClass,
      setActiveNav,
      handleSearch,
      handleUserAction,
      toggleNotifications,
      toggleMessages,
      viewTopic,
      submitTopic,
      clearTopic,
      toggleLike,
      toggleComments,
      addComment,
      shareTopic,
      formatTime,
      openMediaUpload,
      attachFile,
      addPoll,
      saveTopic,
      reportTopic,
      hideTopic,
      validTopics,
      dialogVisible,
      openNewTopicDialog,
      handleNewTopic,
      purchaseContent
    };
  }
});
</script>

<style>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  /* 修改背景为拉伸全屏 */
  background: url('@/assets/d9457c9f.png') no-repeat center center fixed;
  background-size: cover; /* 添加此行实现拉伸效果 */
  color: #f0f0f0; /* 提高字体亮度 */
  line-height: 1.6;
  min-height: 100vh;

  /* 添加深色半透明覆盖层提高文字可读性 */
  position: relative;
}


</style>

<style scoped>
/* 公共面板样式 */
.common-panel {
  background-color: rgba(26, 30, 35, 0.85);
  border: 1px solid #006cf9;
  backdrop-filter: blur(5px);
  border-radius: 10px;
}

/* 提高所有文字亮度 */
.app-container,
.game-header,
.logo,
.search-bar :deep(.el-input__inner),
.user-actions,
.class-section-title,
.class-item,
.class-name,
.nav-item,
.section-title,
.topic-title,
.topic-stats,
.post-user,
.post-content,
.post-stats,
.post-action,
.comment-content {
  color: #f0f0f0; /* 使用更亮的白色 */
}

/* 特定元素的亮度增强 */
.post-content h3 {
  color: #ffd700; /* 更亮的金色 */
}

.logo {
  color: #ffd700; /* 更亮的金色 */
}

/* 提高时间戳等次要文本亮度 */
.post-time,
.comment-time {
  color: #b0b0b0; /* 从#777改为更亮的灰色 */
}

/* 提高输入框文字亮度 */
.topic-title-input :deep(.el-input__inner),
:deep(.el-textarea__inner) {
  color: #ffffff !important; /* 纯白色 */
}

/* 提高按钮文字亮度 */
.post-submit .el-button {
  color: #ffffff;
}

/* 应用整体布局 */
.app-container {
  max-width: 1400px;
  width: 100%;
  margin: 20px auto;
  padding: 0 15px;
}

/* 顶部导航栏 */
.game-header {
  padding: 15px 25px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ffcc00;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wow-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.search-bar {
  width: 350px;
  position: relative;
}

.search-bar i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  z-index: 10;
}

.search-bar :deep(.el-input__wrapper) {
  background-color: rgba(26, 30, 35, 0.7);
  border: 1px solid #3a4758;
  color: #e6e6e6;
  padding-left: 40px;
  border-radius: 20px;
}

.search-bar :deep(.el-input__inner) {
  color: #e6e6e6;
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.action-icon {
  position: relative;
  cursor: pointer;
}

.action-icon i {
  font-size: 20px;
  color: #aaa;
  transition: color 0.2s;
}

.action-icon:hover i {
  color: #ffcc00;
}

.notification-badge,
.message-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #e44c4c;
  color: white;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

.user-avatar {
  cursor: pointer;
  transition: transform 0.2s;
}

.user-avatar:hover {
  transform: scale(1.1);
}

/* 主布局 */
.main-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 20px;
  width: 100%;
}

/* 左侧导航栏 */
.left-sidebar {
  padding: 15px;
  height: fit-content;
  position: sticky;
  top: 20px;
}

.class-section-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffcc00;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #3a4758;
}

.class-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: #aaa;
  background-color: rgba(42, 58, 74, 0.3);
}

.class-item:hover,
.class-item.active {
  background-color: rgba(67, 97, 238, 0.2);
  color: #ffcc00;
}

.class-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  border: 1px solid #3a4758;
}

.class-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.class-name {
  font-size: 15px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: #aaa;
}

.nav-item:hover,
.nav-item.active {
  background-color: rgba(42, 58, 74, 0.3);
  color: #ffcc00;
}

.nav-item i {
  margin-right: 12px;
  font-size: 16px;
  min-width: 20px;
}

/* 主内容区 */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

/* 话题容器 */
.topics-container {
  padding: 15px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #ffcc00;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topics-section {
  display: flex;
  gap: 15px;
  padding: 10px 0;
  overflow-x: auto;
}

.topic {
  width: 180px;
  border-radius: 8px;
  background-color: rgba(42, 58, 74, 0.3);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.3s;
  border: 1px solid #3a4758;
}

.topic:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.topic img {
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.topic-title {
  padding: 8px;
  font-weight: 600;
  color: #e6e6e6;
  font-size: 13px;
  height: 50px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.topic-stats {
  display: flex;
  justify-content: space-around;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 11px;
  color: #aaa;
}

.topic-stats i {
  margin-right: 3px;
}

/* 创建新话题区域 */
.create-post {
  padding: 15px;
}

.post-input-container {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.topic-title-input :deep(.el-input__wrapper) {
  background-color: rgba(26, 30, 35, 0.7);
  border: 1px solid #3a4758;
  color: #e6e6e6;
  border-radius: 8px;
}

:deep(.el-textarea__inner) {
  background-color: rgba(26, 30, 35, 0.7) !important;
  border: 1px solid #3a4758 !important;
  color: #e6e6e6 !important;
  border-radius: 8px !important;
}

.post-options {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.post-option {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  background-color: rgba(42, 58, 74, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  gap: 8px;
  color: #aaa;
  font-size: 14px;
}

.post-option:hover {
  background-color: rgba(42, 58, 74, 0.5);
  color: #ffcc00;
}

.option-icon {
  width: 20px;
  height: 20px;
}

.post-submit {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 帖子容器 */
.posts-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.post {
  padding: 15px;
}

.post-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.post-user {
  font-weight: 600;
  color: #ffcc00;
}

.post-time {
  color: #777;
  font-size: 12px;
}

.post-content {
  margin-bottom: 12px;
}

.post-content h3 {
  color: #ffcc00;
  margin-bottom: 8px;
  font-size: 18px;
}

.post-image {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 12px;
  border: 1px solid #3a4758;
}

.post-stats {
  display: flex;
  gap: 15px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #3a4758;
  font-size: 13px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #aaa;
}

.post-actions {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #3a4758;
  padding-top: 12px;
}

.post-action {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 20px;
  cursor: pointer;
  color: #aaa;
  transition: all 0.2s;
  font-size: 14px;
}

.post-action:hover {
  color: #ffcc00;
  background-color: rgba(42, 58, 74, 0.3);
}

.post-action.liked {
  color: #ff6b6b;
}

/* 评论区域 */
.comments-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #3a4758;
}

.comment-input {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.comment-input :deep(.el-input__wrapper) {
  background-color: rgba(26, 30, 35, 0.7);
  border: 1px solid #3a4758;
  color: #e6e6e6;
  border-radius: 20px;
}

.comment {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.comment-content {
  background-color: rgba(42, 58, 74, 0.3);
  padding: 8px 12px;
  border-radius: 8px;
  flex-grow: 1;
  font-size: 14px;
}

.comment-user {
  font-weight: 600;
  color: #ffcc00;
  margin-bottom: 3px;
  font-size: 13px;
}

.comment-text {
  color: #e6e6e6;
  margin-bottom: 3px;
}

.comment-time {
  color: #777;
  font-size: 11px;
}

/* 响应式设计 */
@media (max-width: 1100px) {
  .main-layout {
    grid-template-columns: 200px 1fr;
  }
}

@media (max-width: 768px) {
  .main-layout {
    grid-template-columns: 1fr;
  }

  .left-sidebar {
    display: none;
  }

  .search-bar {
    width: 200px;
  }

  .game-header {
    padding: 12px 15px;
  }
}
</style>
<style scoped>
  /* 新增付费内容区域样式 */
.paid-section {
  margin-top: 20px;
  border: 1px solid #3a4758;
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(42, 58, 74, 0.3);
}

.paid-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  background-color: rgba(26, 30, 35, 0.7);
  border-bottom: 1px solid #3a4758;
  color: #ffcc00;
}

.paid-header i {
  margin-right: 8px;
  font-size: 18px;
}

.paid-header span {
  flex-grow: 1;
  font-weight: 600;
}

.purchase-button {
  background-color: rgba(255, 204, 0, 0.1);
  border-color: #ffcc00;
  color: #ffcc00;
  font-weight: bold;
}

.paid-content {
  padding: 15px;
}

.paid-preview {
  padding: 15px;
  color: #aaa;
  font-style: italic;
  background-color: rgba(0, 0, 0, 0.2);
}
</style>